<template>
    <div>
        <div class="vs-table-box">
            <div class="small-box">
                <div class="phna">
                    <p>积分变更</p>
                </div>
            </div>
            <div class="big-box">
                <el-form v-loading="loading" :model="form" :rules="rules" label-position="right" label-width="140px" ref="ruleForm">
                    <el-form-item label="会员卡号：">
                        <span>{{ info.vip_no }}</span>
                    </el-form-item>
                    <el-form-item label="姓名：">
                        <span>{{ info.realname }}</span>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <span>{{ info.phone }}</span>
                    </el-form-item>
                    <el-form-item label="积分余额：">
                        <span>{{ info.integral }}</span>
                    </el-form-item>
                    <el-form-item label="充值时间：" prop="pay_time">
                        <el-date-picker style="width: 260px" v-model="form.pay_time" value-format="yyyy-MM-dd" type="date" placeholder="请选择"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="变更类型:" prop="type">
                        <el-radio-group v-model="form.type">
                            <el-radio label="4">充值</el-radio>
                            <el-radio label="5">扣减</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="充值/扣减积分：" prop="number">
                        <el-input v-enter-money v-model="form.number" placeholder="请输入" style="width: 260px"></el-input>
                    </el-form-item>
                    <el-form-item label="备注：">
                        <el-input v-model="form.content" placeholder="请输入" style="width: 260px"></el-input>
                    </el-form-item>
                    <el-form-item label="操作员工：" prop="staff_id">
                        <el-select v-model="form.staff_id" style="width: 260px" placeholder="请选择">
                            <el-option v-for="item in stafff" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-bottom-btns btns">
                <el-button @click="utils.backPage()">取消</el-button>
                <el-button @click="subitm" :loading="isBtn" type="primary">立即{{ form.type == 4 ? '充值' : '扣减' }}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                isBtn: false,
                form: {
                    pay_time: '',
                    staff_id: '',
                    user_id: '',
                    type: '4',
                    number: '',
                    content: '',
                },
                typeName: ['充值', '扣减'],
                info: {}, //个人信息,
                stafff: [], //员工列表
                rules: {
                    number: [{ required: true, message: '请输入积分/金额数量', trigger: 'blur' }],
                    staff_id: [{ required: true, message: '请选择员工', trigger: 'change' }],
                    pay_time: [{ required: true, message: '请选择时间', trigger: 'change' }],
                    type: [{ required: true, message: '请选择变更类型', trigger: 'change' }],
                },
            };
        },
        created() {
            this.form.user_id = this.$route.query.id;
            this.getStaff();
            this.getUser();
            // 获取当前时间
            let date = new Date();
            this.form.date = this.utils.time(date);
        },
        methods: {
            subitm() {
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (!valid) return;
                    this.isBtn = true;
                    let { code, data } = await this.$Http.setIntegral(this.form);
                    this.isBtn = false;
                    if (code) {
                        this.utils.backPage();
                        this.$message.success(`${this.form.type == 4 ? '充值' : '扣减'}成功`);
                    }
                });
            },
            //   获取会员详情
            async getUser() {
                let { code, data } = await this.$Http.getUser({ id: this.form.user_id });
                this.info = data;
            },
            // 获取员工列表
            async getStaff() {
                let { code, data } = await this.$Http.getStaff({ is_all: 1, status: 1 });
                this.stafff = data;
            },
        },
    };
</script>
<style lang="scss" scoped>
    .vs-table-box {
    }
</style>
